<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="60%"
      append-to-body
      custom-class="import-dialog"
    >
      <div v-loading="loading">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="detail-item">
              <div class="label">规则编号</div>
              <div class="value">
                {{ unsubscribeRuleData.unsubscribeRuleId }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <div class="label">规则名称</div>
              <div class="value">
                {{ unsubscribeRuleData.unsubscribeRuleName }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <div class="label">使用范围</div>
              <div class="value">
                <dict-tag
                  :options="dict.type.dict_unsubscribe_rule_type"
                  :value="unsubscribeRuleData.unsubscribeRuleType"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="detail-item">
              <div class="label">启用状态</div>
              <div class="value">
                <dict-tag
                  :options="dict.type.dict_enable_status"
                  :value="unsubscribeRuleData.enableStatus"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <div class="label">创建人员</div>
              <div class="value">{{ unsubscribeRuleData.createBy }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <div class="label">创建时间</div>
              <div class="value">
                {{ unsubscribeRuleData.createTime }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <div class="detail-item">
              <div class="label">退订规则</div>
              <div class="value">
                <p>
                  <dict-tag
                    :options="dict.type.dict_cancel_type"
                    :value="unsubscribeRuleData.unsubscribeRuleType"
                  />
                </p>
                <p>入住前{{ unsubscribeRuleData.freeDays }}天可免费取消</p>
                <p>
                  入住前{{ unsubscribeRuleData.minDays }} -
                  {{ unsubscribeRuleData.maxDays }}天内取消，扣除租金{{
                    unsubscribeRuleData.rent
                  }}%,扣除押金{{ unsubscribeRuleData.cashPledge }}%。
                </p>
                <p>
                  入住当天取消，扣除租金{{
                    unsubscribeRuleData.todayRent
                  }}%,扣除押金{{ unsubscribeRuleData.todayCashPledge }}%
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getUnsubscribeRule } from "@/api/house/rule";
export default {
  props: {
    title: {
      default: "退订规则详情",
    },
    value: {
      default: false,
    },
    unsubscribeRuleId: {
      default: undefined,
    },
  },
  dicts: [
    "dict_unsubscribe_rule_type",
    "dict_cancel_type",
    "dict_enable_status",
  ],
  data() {
    return {
      visible: false,
      unsubscribeRuleData: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roomNumber: undefined,
        apartmentType: undefined,
        editStatus: undefined,
        apartmentState: undefined,
        updateBy: undefined,
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
    };
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  methods: {
    init() {
      this.getUnsubscribeRule();
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      // this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询房间列表 */
    // getList() {
    //   this.loading = true;
    //   listRoom(this.queryParams).then((response) => {
    //     this.list = response.rows;
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    getUnsubscribeRule() {
      this.loading = true;
      getUnsubscribeRule(this.unsubscribeRuleId).then((response) => {
        this.unsubscribeRuleData = { ...response.data };
        this.loading = false;
      });
    },
    handleSelectionChange() {},
    selectHosue(item) {
      this.$emit("success", item);
      this.close();
    },
    close() {
      this.resetQuery();
      this.visible = false;
    },
  },
};
</script>
  
<style lang="scss" scoped>
.detail-item {
  margin-bottom: 20px;
  .label {
    color: #7f7f7f;
    margin-bottom: 10px;
  }
  .value {
    font-size: 16px;
  }
}
</style>